<script setup>
import {ref} from "vue";

defineProps({
  personalDrawer: {
    type: Boolean,
    default: false
  }
})

const emit = defineEmits(['update:personalDrawer'])

const userInfo = ref({
  username: '',
  email: '',
  phone: ''
})

const rules = ref({
  username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
  email: [{ required: true, message: '请输入邮箱', trigger: 'blur' }],
  phone: [{ required: true, message: '请输入手机号', trigger: 'blur' }]
})

const handleClose = (done) => {
  emit('update:personalDrawer', false)
  done();
}
</script>

<template>
  <div>
    <el-drawer :model-value="personalDrawer"
               @update:model-value="val => emit('update:personalDrawer', val)"
               title="个人中心"
               direction="rtl"
               :before-close="handleClose">
      <el-form :model="userInfo" :rules="rules" ref="userInfoForm" label-width="100px">
        <el-form-item label="用户名" prop="username">
          <el-input v-model="userInfo.username" placeholder="请输入用户名"></el-input>
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="userInfo.email" placeholder="请输入邮箱"></el-input>
        </el-form-item>
        <el-form-item label="手机号" prop="phone">
          <el-input v-model="userInfo.phone" placeholder="请输入手机号"></el-input>
        </el-form-item>
      </el-form>
    </el-drawer>
  </div>
</template>

<style scoped>

</style>
